<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.lee.dhsg.domain.Student" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
    Student student = (Student) session.getAttribute("StudentSession");
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/messages_zh.js"></script>
    <link rel="stylesheet" href="css/other.css"/>
</head>
<style>
    #class-mulu {
        position: relative;
    }

    #user_comment {
        position: absolute;
        display: none;
    }

    #user_mark {
        position: absolute;
        display: none;
    }

    #user_section {
        position: absolute;
    }
</style>
<body>

<!--我的评论-->
<div class="container">
    <div class="modal fade" id="Mymodal-comment">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4>评论窗口</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>课程名称</label>
                        <input type="text" class="form-control" name="username">
                    </div>
                    <div class="form-group">
                        <label>评论概要</label>
                        <textarea class="form-control" rows="5"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">提交</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>

                </div>
            </div>
        </div>
    </div>
</div>


<!--主页模态窗-->
<div>
    <!--登陆选择身份-->
    <div class="container">
        <div class="modal fade" id="Mymodal-1">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4>你的身份是？</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <ul class="nav navbar-nav navbar-collapse">
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-teacher-login"
                                       data-dismiss="modal">老师</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-student-login"
                                       data-dismiss="modal">学生</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--注册选择身份-->
    <div class="container">
        <div class="modal fade" id="Mymodal-2">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4>你的身份是？</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <ul class="nav navbar-nav navbar-collapse">
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-teacher-signup"
                                       data-dismiss="modal">老师</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#Mymodal-student-signup"
                                       data-dismiss="modal">学生</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--老师登陆 -->
    <div class="container">
        <div class="modal fade" id="Mymodal-teacher-login">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="teacherLogin" action="teacherLogin" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>老师</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--学生登陆-->
    <div class="container">
        <div class="modal fade" id="Mymodal-student-login">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="studentLogin" action="studentLogin" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>学生</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--老师注册-->
    <div class="container">
        <div class="modal fade" id="Mymodal-teacher-signup">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="teacherRegister" action="teacherRegister" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>老师</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 学生注册-->
    <div class="container">
        <div class="modal fade" id="Mymodal-student-signup">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form name="studentRegister" action="studentRegister" method="post">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">&times;</button>
                            <h4>学生</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名/手机/邮箱</label>
                                <input type="text" class="form-control" name="username">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary">确定</button>
                            <button class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--导航模块-->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index" class="navbar-brand">大好时光</a>
        </div>
        <div class="navbar-collapse collapse">
            <div class="input-append">
                <input class="span2" id="appendedInputButton" type="text">
                <button class="btn" type="button">搜索</button>
                <ul class="nav navbar-nav navbar-right">
                    <%
                        if (student != null) {
                    %>
                    <li>
                        <img src="<%=student.getIcon()%>" class="img-circle"/>
                    </li>
                    <li><%=student.getUsername()%> ! 你好啊！喝茶还是喝咖啡？</li>
                    <li><a href="studentLogout">退出登陆</a></li>
                    <%
                    } else {
                    %>
                    <li class="divider-vertical"></li>
                    <li><a href="#" data-toggle="modal" data-target="#Mymodal-1">登陆</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#" data-toggle="modal" data-target="#Mymodal-2">注册</a></li>
                    <%
                        }
                    %>
                </ul>
            </div>
        </div>
    </div>
</nav>

<section id="contact-class">
    <div class="lvjing">
        <div class="container">
            <div class="row-class">
                <h2>${course.cname}</h2>
                <p>${course.courseDescription}</p>
            </div>
        </div>
    </div>
</section>

<nav class="navbar navbar-default" id="class-nav">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#" id="submit_section">章节</a></li>
                <li><a href="#" id="submit_comment">评论</a></li>
            </ul>
        </div>
    </div>
</nav>

<section id="class-mulu">

    <%-- 章节 --%>
    <div class="container" id="user_section">
        <c:forEach items="${catalogListMap.keySet()}" var="firstCatalog" varStatus="st1">
            <div class="row">
                <div class="col-lg-9">
                    <h3>${firstCatalog.name}</h3>
                    <c:forEach items="${catalogListMap.get(firstCatalog)}" var="secondCatalog" varStatus="st2">
                        <li class="list-group-item"><a href="coursePlayofS">${secondCatalog.name}</a></li>
                    </c:forEach>
                </div>
            </div>
        </c:forEach>
    </div>

    <%-- 评论 --%>
    <div class="container" id="user_comment">
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-9">
                    <p>用户名</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>

                </div>
                <div class="col-md-1">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#Mymodal-comment">回复</button>
                </div>


            </div>
        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-9">
                    <p>用户名</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>

                </div>
                <div class="col-md-1">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#Mymodal-comment">回复</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-9">
                    <p>用户名</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>

                </div>
                <div class="col-md-1">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#Mymodal-comment">回复</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9">
                <div class="col-md-2">
                    <img src="img/touxiang.png" class="img-circle"/>
                </div>
                <div class="col-md-9">
                    <p>用户名</p>
                    <small style="color: #9D9D9D;">来自：章节，课时6-3</small>
                    <div style="border-left: 2px #000000;">
                        <p>评论文案评论文案评论文案评论文案评论文案评论文案评论文案评论
                            文案评论文案评论文案评论文案评论文案评论文
                            案评论文案评论文案评论文案评论文案评论文案</p>
                    </div>

                </div>
                <div class="col-md-1">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#Mymodal-comment">回复</button>
                </div>
            </div>
        </div>
    </div>

</section>


</body>
<script>
    $(window).scroll(function () {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav");
        }
    })
    $(function () {

        $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px');
        $(window).resize(function () {
            var $height = $('.carousel-inner img').eq(0).height() ||
                $('.carousel-inner img').eq(1).height() ||
                $('.carousel-inner img').eq(2).height();
            $('.carousel-control').css('line-height', $height + 'px');
        })
    })
    $(function () {
        $('#myCarousel').carousel({
            interval: 3000,
        })
    })

    //      $('#myModal').modal().css({'margin-top': function () {
    //       return ($(this).height() * 0.5);
    //      }
    $(function () {
        $("#submit_section").click(function () {
            $("#user_section").show();
            $("#user_comment").hide();
            $("#user_mark").hide();

        })
        $("#submit_comment").click(function () {
            $("#user_section").hide();
            $("#user_comment").show();
            $("#user_mark").hide();

        })
        $("#submit_mark").click(function () {
            $("#user_section").hide();
            $("#user_comment").hide();
            $("#user_mark").show();

        })
    })


</script>
</html>